<template>
  <a-drawer
    v-if="visible"
    :append-to-body="true"
    :width="540"
    :visible="visible"
    :closable="false"
    @cancel="close()"
    @ok="saveApprover()"
    ok-text="保存"
  >
    <template #title>
      <EditableText :value="flowNodeConfig.name" @change="onNodeNameChange" />
    </template>

    <div class="approver-drawer__content">
      <!-- 节点审批类型 -->
      <div class="approval-editor-node-type-wrapper">
        <div class="item-key-wrapper">
          <div class="item-key">审批类型</div>
        </div>
        <div class="item-content">
          <a-radio-group v-model="flowNodeConfig.approvalType">
            <a-radio :value="0">人工审批</a-radio>
            <a-radio :value="1">自动通过</a-radio>
            <a-radio :value="2">自动拒绝</a-radio>
          </a-radio-group>
        </div>
      </div>

      <!-- 人工审批审批人选择界面 -->
      <div
        class="approval-editor-tab-wrapper"
        v-if="flowNodeConfig.approvalType == 0"
      >
        <a-radio-group type="button" v-model="viewEditorType" size="large">
          <a-radio :value="0">设置审批人</a-radio>
          <a-radio :value="1">表单权限</a-radio>
          <a-radio :value="2">按钮配置</a-radio>
          <!-- <a-radio :value="3">外部交互</a-radio> -->
        </a-radio-group>

        <!-- 设置审批人 -->
        <div class="item-content-editor" v-if="viewEditorType == 0">
          <div class="content-wrap">
            <div class="item-content">
              <!-- 审批人列表 -->
              <div class="item-wrap approver">
                <div class="approver-list">
                  <div
                    class="approver-wrapper"
                    v-for="(item, idx) in flowNodeConfig.assignees"
                    :key="idx"
                  >
                    <div class="header">
                      <span>审批人{{ idx + 1 }}</span>
                      <icon-delete
                        :style="{ fontSize: '18px' }"
                        @click="delApprover(item)"
                        v-if="flowNodeConfig.assignees.length > 1"
                      />
                    </div>
                    <div class="main-content">
                      <a-radio-group
                        class="radio-group"
                        v-model="item.assigneeType"
                        @change="onAssigneeTypeChanged(item)"
                      >
                        <a-grid :cols="3" :colGap="0" :rowGap="10">
                          <!-- <a-grid-item>
                            <a-radio :value="0">发起人本人</a-radio>
                          </a-grid-item> -->
                          <a-grid-item>
                            <a-radio :value="1">上级</a-radio>
                          </a-grid-item>
                          <a-grid-item>
                            <a-radio :value="2">部门负责人</a-radio>
                          </a-grid-item>
                          <a-grid-item>
                            <a-radio :value="3">角色</a-radio>
                          </a-grid-item>
                          <a-grid-item>
                            <a-radio :value="4">指定成员</a-radio>
                          </a-grid-item>
                          <!-- <a-grid-item>
                            <a-radio :value="5" :disabled="haveMultiNode">
                              连续多级上级
                            </a-radio>
                          </a-grid-item>
                          <a-grid-item
                            ><a-radio :value="6" :disabled="haveMultiNode">
                              连续多级部门负责人
                            </a-radio>
                          </a-grid-item> -->
                          <a-grid-item>
                            <a-radio :value="7" :disabled="haveMultiNode">
                              发起人自选
                            </a-radio>
                          </a-grid-item>
                          <a-grid-item>
                            <a-radio :value="8"> 表单内人员 </a-radio>
                          </a-grid-item>
                        </a-grid>
                      </a-radio-group>
                    </div>
                    <div
                      class="sub-content"
                      v-if="![0, 7].includes(item.assigneeType)"
                    >
                      <div class="sub-content-top-line"></div>
                      <template v-if="item.assigneeType == 1">
                        <p class="bold">请选择上级</p>
                        <a-form-item label="发起人的">
                          <a-select
                            placeholder="请选择上级"
                            v-model="item.layer"
                            :disabled="true"
                          >
                            <template #header>
                              <div class="switch-container">
                                <div class="select-tip">从直属上级向上选择</div>
                                <a-link @click="switchLayerType(item)">
                                  <template #icon><icon-swap /></template
                                  >{{
                                    item.layerType == 0
                                      ? "切为最高上级向下"
                                      : "切为直属上级向上"
                                  }}
                                </a-link>
                              </div>
                            </template>
                            <a-option v-for="i in 20" :value="i - 1" :key="i">
                              <template v-if="item.layerType == 0">{{
                                i == 1
                                  ? "直属上级"
                                  : "直属上级加 " + (i - 1) + " 级"
                              }}</template>
                              <template v-else>{{
                                i == 1
                                  ? "最高上级"
                                  : "最高上级减 " + (i - 1) + " 级"
                              }}</template>
                            </a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                      <template v-else-if="item.assigneeType == 2">
                        <p class="bold">请选择部门负责人</p>
                        <a-form-item label="发起人的">
                          <a-select
                            placeholder="请选择部门负责人"
                            v-model="item.layer"
                            :disabled="true"
                          >
                            <template #header>
                              <div class="switch-container">
                                <div class="select-tip">
                                  从直属部门负责人向上选择
                                </div>
                                <a-link @click="switchLayerType(item)">
                                  <template #icon><icon-swap /></template
                                  >{{
                                    item.layerType == 0
                                      ? "切为最高部门向下"
                                      : "切为直属部门向上"
                                  }}
                                </a-link>
                              </div>
                            </template>
                            <a-option v-for="i in 20" :value="i - 1" :key="i">
                              <template v-if="item.layerType == 0">
                                {{
                                  i == 1
                                    ? "直属部门负责人"
                                    : "直属部门负责人加 " + (i - 1) + " 级"
                                }}
                              </template>
                              <template v-else>{{
                                i == 1
                                  ? "最高部门负责人"
                                  : "最高部门负责人减 " + (i - 1) + " 级"
                              }}</template>
                            </a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                      <template v-else-if="item.assigneeType == 3">
                        <p class="bold">选择角色</p>
                        <a-form-item tooltip="请选择角色" label="组织角色">
                          <a-select
                            multiple
                            placeholder="请选择角色"
                            v-model="item.roles"
                            @change="(val) => roleChange(val, idx)"
                          >
                            <a-option
                              v-for="role in allRoles"
                              :value="role.id"
                              :label="role.name"
                              :key="role.id"
                            ></a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                      <template v-else-if="item.assigneeType == 4">
                        <p class="bold">
                          添加成员<span>（不能超过 25 人）</span>
                        </p>
                        <div class="assignee-box">
                          <a-button size="small" @click="onAssigneeClick(item)"
                            ><icon-plus
                          /></a-button>
                          <span class="assignee-list">
                            <a-tag
                              v-for="userId in item.assignees"
                              :key="userId"
                              >{{ getUserById(userId).name }}</a-tag
                            >
                          </span>
                          <OrganChooseBox
                            v-if="showChooseAssignee"
                            v-model:visible="showChooseAssignee"
                            v-model:selected="selectedAssignee.assignees"
                            :hidden-dept="true"
                            :hidden-role="true"
                          />
                        </div>
                      </template>
                      <template v-else-if="item.assigneeType == 5">
                        <p class="bold">审批终点</p>
                        <a-form-item label="发起人的">
                          <a-select
                            placeholder="请选择上级"
                            v-model="item.layer"
                          >
                            <template #header>
                              <div class="switch-container">
                                <div class="select-tip">从直属上级向上选择</div>
                                <a-link @click="switchLayerType(item)">
                                  <template #icon><icon-swap /></template
                                  >{{
                                    item.layerType == 0
                                      ? "切为最高上级向下"
                                      : "切为直属上级向上"
                                  }}
                                </a-link>
                              </div>
                            </template>
                            <a-option v-for="i in 20" :value="i - 1" :key="i">
                              <template v-if="item.layerType == 0">{{
                                i == 1
                                  ? "直属上级"
                                  : "直属上级加 " + (i - 1) + " 级"
                              }}</template>
                              <template v-else>{{
                                i == 1
                                  ? "最高上级"
                                  : "最高上级减 " + (i - 1) + " 级"
                              }}</template>
                            </a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                      <template v-else-if="item.assigneeType == 6">
                        <p class="bold">审批终点</p>
                        <a-form-item label="发起人的">
                          <a-select
                            placeholder="请选择部门负责人"
                            v-model="item.layer"
                          >
                            <template #header>
                              <div class="switch-container">
                                <div class="select-tip">
                                  从直属部门负责人向上选择
                                </div>
                                <a-link @click="switchLayerType(item)">
                                  <template #icon><icon-swap /></template
                                  >{{
                                    item.layerType == 0
                                      ? "切为最高部门向下"
                                      : "切为直属部门向上"
                                  }}
                                </a-link>
                              </div>
                            </template>
                            <a-option v-for="i in 20" :value="i - 1" :key="i">
                              <template v-if="item.layerType == 0">
                                {{
                                  i == 1
                                    ? "直属部门负责人"
                                    : "直属部门负责人加 " + (i - 1) + " 级"
                                }}
                              </template>
                              <template v-else>{{
                                i == 1
                                  ? "最高部门负责人"
                                  : "最高部门负责人减 " + (i - 1) + " 级"
                              }}</template>
                            </a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                      <template v-else-if="item.assigneeType == 8">
                        <p class="bold">人员控件</p>
                        <a-form-item label="表单内">
                          <a-select
                            placeholder="请选择表单字段"
                            v-model="item.assignees"
                            multiple
                          >
                            <a-option
                              v-for="item in flowWidgets"
                              :value="item.field"
                              :key="item.id"
                            >
                              {{ item.label }}
                            </a-option>
                          </a-select>
                        </a-form-item>
                      </template>
                    </div>
                  </div>
                </div>

                <!-- 添加审核人按钮 -->
                <div class="add-operator">
                  <a-link @click="addApprover()" v-if="!onlyOneNode">
                    <template #icon><icon-plus /></template>添加审批人
                  </a-link>
                </div>
              </div>

              <!-- 会签、或签、序签 -->
              <div
                class="item-wrap sign-type"
                v-if="haveMultiNode || isInitiatorChoiceOrRoleOrAssignee"
              >
                <div class="item-key-wrapper">
                  <div class="item-key">多人审批时采用的审批方式</div>
                </div>
                <div class="item-content">
                  <a-radio-group
                    direction="vertical"
                    v-model="flowNodeConfig.multiInstanceApprovalType"
                  >
                    <a-radio :value="MULTI_TYPE[1]">
                      会签（需所有审批人同意）
                    </a-radio>
                    <a-radio :value="MULTI_TYPE[2]">
                      或签（一名审批人同意即可）
                    </a-radio>
                    <a-radio :value="MULTI_TYPE[3]" v-if="isSameAssigneeType">
                      依次审批（按顺序依次审批）
                    </a-radio>
                  </a-radio-group>
                </div>
              </div>

              <!-- 审批人为空时 -->
              <div class="item-wrap approver-null">
                <div class="item-key-wrapper">
                  <div class="item-key">审批人为空时</div>
                </div>
                <div class="item-content">
                  <a-radio-group
                    v-model="flowNodeConfig.flowNodeNoAuditorType"
                    @change="onNoAuditorTypeChanged"
                  >
                    <a-radio :value="NO_AUDITOR_TYPE[0]">自动通过</a-radio>
                    <a-radio :value="NO_AUDITOR_TYPE[1]">指定人员审批</a-radio>
                    <!-- <a-radio :value="NO_AUDITOR_TYPE[2]">转交给审批管理员</a-radio> -->
                  </a-radio-group>

                  <div class="approver-null-select-box">
                    <a-form-item
                      label="指定成员"
                      v-if="
                        flowNodeConfig.flowNodeNoAuditorType ==
                        NO_AUDITOR_TYPE[1]
                      "
                    >
                      <a-select
                        placeholder="请选择成员"
                        v-model="flowNodeConfig.flowNodeNoAuditorAssignee"
                      >
                        <a-option
                          v-for="user in allUsers"
                          :value="user.id"
                          :label="user.name"
                          :key="user.id"
                        ></a-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item
                      label="审批管理员"
                      v-else-if="
                        flowNodeConfig.flowNodeNoAuditorType ==
                        NO_AUDITOR_TYPE[2]
                      "
                    >
                      <a-select
                        placeholder="请选择管理员"
                        v-model="flowNodeConfig.flowNodeAuditAdmin"
                      >
                        <a-option
                          v-for="userId in workFlowDef.flowAdminIds"
                          :value="userId"
                          :label="getUserById(userId).name"
                          :key="userId"
                        />
                      </a-select>
                    </a-form-item>
                  </div>
                </div>
              </div>

              <!-- 审批人为自己时 -->
              <div class="item-wrap approver-self">
                <div class="item-key-wrapper">
                  <div class="item-key">审批人与提交人为同一人时</div>
                </div>
                <div class="item-content">
                  <a-radio-group
                    class="radio-group"
                    v-model="flowNodeConfig.flowNodeSelfAuditorType"
                  >
                    <a-grid :cols="2" :colGap="0" :rowGap="10">
                      <a-grid-item>
                        <a-radio :value="SAME_TYPE[0]">
                          由发起人对自己审批
                        </a-radio>
                      </a-grid-item>
                      <a-grid-item>
                        <a-radio :value="SAME_TYPE[1]">自动跳过</a-radio>
                      </a-grid-item>
                      <a-grid-item>
                        <a-radio :value="SAME_TYPE[2]">
                          转交给直接上级审批
                        </a-radio>
                      </a-grid-item>
                      <a-grid-item>
                        <a-radio :value="SAME_TYPE[3]">
                          转交给部门负责人审批
                        </a-radio>
                      </a-grid-item>
                    </a-grid>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 设置表单权限 -->
        <NodeFormAuthSetting
          v-model:flowNodeConfig="flowNodeConfig"
          v-else-if="viewEditorType == 1"
        >
        </NodeFormAuthSetting>
        <!-- 设置按钮权限 -->
        <NodeButtonSetting
          v-model:flowNodeConfig="flowNodeConfig"
          v-else-if="viewEditorType == 2"
        />
        <!-- 设置操作权限 -->
        <NodeEventSetting
          v-model:flowNodeConfig="flowNodeConfig"
          v-else-if="viewEditorType == 3"
        />
      </div>
      <!-- 自动通过 -->
      <div
        class="item-wrap"
        v-if="
          flowNodeConfig.approvalType == 1 || flowNodeConfig.approvalType == 2
        "
        style="margin-top: 24px"
      >
        <div class="item-key-wrapper">
          <div class="item-key">自动审核时间设定</div>
        </div>
        <div class="item-content">
          <a-row :gutter="[0, 24]">
            <a-col :xl="6" :md="12" :sm="24">
              <div class="timer">
                <a-input-number
                  v-model="flowNodeConfig.autoConditionExpression.M"
                  placeholder=""
                  :min="0"
                  :max="12"
                  :step="1"
                  :precision="0"
                  :style="{ width: '100%' }"
                />
                <div class="unit">月</div>
              </div>
            </a-col>
            <a-col :xl="6" :md="12" :sm="24">
              <div class="timer">
                <a-input-number
                  v-model="flowNodeConfig.autoConditionExpression.W"
                  placeholder=""
                  :min="0"
                  :step="1"
                  :precision="0"
                />
                <div class="unit">周</div>
              </div>
            </a-col>
            <a-col :xl="6" :md="12" :sm="24">
              <div class="timer">
                <a-input-number
                  v-model="flowNodeConfig.autoConditionExpression.D"
                  placeholder=""
                  :min="0"
                  :max="365"
                  :precision="0"
                />
                <div class="unit">天</div>
              </div>
            </a-col>
            <a-col :xl="6" :md="12" :sm="24">
              <div class="timer">
                <a-input-number
                  v-model="flowNodeConfig.autoConditionExpression.H"
                  placeholder=""
                  :min="0"
                  :step="0.5"
                  :precision="1"
                />
                <div class="unit">小时</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script setup>
import { computed, onBeforeMount, onMounted, ref, toRaw, watch } from "vue";
import { useFlowStore, useOrganStore } from "@/stores/index";
import ArrayUtil from "../common/ArrayUtil";
import Snowflake from "../common/Snowflake";
import OrganChooseBox from "../dialog/OrganChooseBox.vue";
import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
import EditableText from "@/components/common/EditableText.vue";
import NodeFormAuthSetting from "../NodeFormAuthSetting.vue";
import NodeButtonSetting from "../NodeButtonSetting.vue";
import NodeEventSetting from "../NodeEventSetting.vue";
import {
  ASSIGNEE_TYPE,
  MULTI_TYPE,
  SAME_TYPE,
  NO_AUDITOR_TYPE,
} from "../common/FlowConstant";

let flowStore = useFlowStore();
const { roles: allRoles, users: allUsers, getUserById } = useOrganStore();
let { showApproverDrawer, setApproverConfig } = flowStore;
let isApproverDrawerOpened = computed(() => flowStore.isApproverDrawerOpened);
let approverConfig0 = computed(() => flowStore.approverConfig0);
let workFlowDef = computed(() => flowStore.flowDefinition.workFlowDef);
let flowWidgets = computed(() => flowStore.personFields);
let visible = computed({
  get: () => isApproverDrawerOpened.value,
  set: () => close(),
});
let viewEditorType = ref(0); // 界面编辑类型    0:审批人; 1:表单权限; 2:操作权限; 3:外部交互
let _uid = ref(0);
let flowNodeConfig = ref({
  // type: 1,
  // approvalType: 0,
  // multiInstanceApprovalType: 0,
  // flowNodeNoAuditorType: 0,
  // flowNodeSelfAuditorType: 0,
  // assignees: [
  // {
  //   id: Snowflake.generate(),
  //   assigneeType: 0,
  //   layerType: 0,
  // },
  // ],
  // 自动审核表达式
  autoConditionExpression: {
    M: 0, //月
    W: 0, //周
    D: 0, //天
    H: 0, //小时
  },
});

// 是否为单个审批人节点
let onlyOneNode = computed(() => {
  let fristAssigneeType = flowNodeConfig.value.assignees[0].assigneeType;
  return [5, 6, 7].includes(fristAssigneeType);
});

// 是否含有多个审批人
let haveMultiNode = computed(() => {
  return flowNodeConfig.value.assignees.length > 1;
});

// 是否设置了发起人自选，角色，指定审批人
let isInitiatorChoiceOrRoleOrAssignee = computed(() => {
  let fristAssigneeType = flowNodeConfig.value.assignees[0].assigneeType;
  return [3, 4, 7].includes(fristAssigneeType);
});

// 多个审核人设置的类型是否一致, 类型一致时才会有依次审批
let isSameAssigneeType = computed(() => {
  if (flowNodeConfig.value.assignees.length == 1) return false;
  let haveSameType = true;
  let tmpAssigneeType = flowNodeConfig.value.assignees[0].assigneeType;
  for (let i = 1; i < flowNodeConfig.value.assignees.length; i++) {
    let tmpAssignee = flowNodeConfig.value.assignees[i];
    if (tmpAssigneeType != tmpAssignee.assigneeType) {
      haveSameType = false;
      break;
    }
  }
  // 如果不能使用序签，则默认会签
  if (!haveSameType) {
    if (flowNodeConfig.value.multiInstanceApprovalType == MULTI_TYPE[3]) {
      flowNodeConfig.value.multiInstanceApprovalType = MULTI_TYPE[1];
    }
  }
  return haveSameType;
});

// 审批人选择指定成员
let showChooseAssignee = ref(false); // 是否显示指定成员对话框
let selectedAssignee = ref({}); // 当前选中的单个审批人设置
const onAssigneeClick = (item) => {
  selectedAssignee.value = item;
  showChooseAssignee.value = true;
};

watch(approverConfig0, (val) => {
  flowNodeConfig.value = val.value;
  viewEditorType.value = 0;
  _uid = val.id;
  console.log("审批人节点1", flowNodeConfig);
});

watch(
  flowNodeConfig,
  (newVal) => {
    console.log("审批人节点2", newVal);
    if (newVal.assignees.length == 1) {
      // 只设置了一个审批人
      let fristAssigneeType = flowNodeConfig.value.assignees[0].assigneeType;
      // 是否设置连续多级上级,连续多级部门负责人
      if ([5, 6].includes(fristAssigneeType)) {
        flowNodeConfig.value.multiInstanceApprovalType = MULTI_TYPE[3];
      }

      // 是否设置了发起人自选，角色，指定审批人
      if (
        [3, 4, 7].includes(fristAssigneeType) &&
        [0, MULTI_TYPE[3]].includes(
          flowNodeConfig.value.multiInstanceApprovalType
        )
      ) {
        if (flowNodeConfig.value.multiInstanceApprovalType == 0) {
          flowNodeConfig.value.multiInstanceApprovalType = MULTI_TYPE[1];
        }
      }
    } else {
      // 如果设置了多个审批人，默认会签
      if (flowNodeConfig.value.multiInstanceApprovalType == 0) {
        flowNodeConfig.value.multiInstanceApprovalType = MULTI_TYPE[1];
      }
    }
  },
  { deep: true }
);

// 切换上级和部门负责人的人事层级关系
const switchLayerType = (assignee) => {
  assignee.layerType = assignee.layerType == 0 ? 1 : 0;
};

// 审批人类型切换时
const onAssigneeTypeChanged = (assignee) => {
  console.log("审批人类型切换时", assignee);
  let { assigneeType } = assignee;
  if ([1, 2, 5, 6].includes(assigneeType)) {
    assignee.layerType = 0;
    assignee.layer = 0;
    delete assignee.roles;
    delete assignee.marks;
    delete assignee.assignees;
  } else if ([0, 7].includes(assigneeType)) {
    delete assignee.layerType;
    delete assignee.layer;
    delete assignee.roles;
    delete assignee.marks;
    delete assignee.assignees;
  } else if ([3].includes(assigneeType)) {
    delete assignee.layerType;
    delete assignee.layer;
    delete assignee.assignees;
  } else if ([4].includes(assigneeType)) {
    assignee.assignees = [];
    delete assignee.layerType;
    delete assignee.layer;
    delete assignee.roles;
    delete assignee.marks;
  }
};

// 节点审批人为空选项改变时
const onNoAuditorTypeChanged = (type) => {
  if (type == 1) {
    delete flowNodeConfig.value.flowNodeAuditAdmin;
  } else if (type == 2) {
    delete flowNodeConfig.value.flowNodeNoAuditorAssignee;
  } else {
    delete flowNodeConfig.value.flowNodeNoAuditorAssignee;
    delete flowNodeConfig.value.flowNodeAuditAdmin;
  }
};

// 添加审批人
const addApprover = () => {
  flowNodeConfig.value.assignees.push({
    rid: Snowflake.generate(),
    assigneeType: 4,
  });
};

// 删除审批人
const delApprover = (approver) => {
  ArrayUtil.remove(flowNodeConfig.value.assignees, "rid", approver.rid);
  // 当设置的审批人删除到一个时。节点类型设置为：非多实例审批
  if (flowNodeConfig.value.assignees.length === 1) {
    flowNodeConfig.value.multiInstanceApprovalType = 0;
  }
};

// 编辑节点名称
const onNodeNameChange = (name) => {
  flowNodeConfig.value.name = name;
  saveApprover(false);
};

// 角色change时，传入角色类型
const roleChange = (ids, index) => {
  const marks = [];
  for (let i = 0; i < allRoles.length; i++) {
    const role = allRoles[i];
    for (let j = 0; j < ids.length; j++) {
      const id = ids[j];
      if (role.id == id) {
        marks.push(role.mark);
      }
    }
  }
  flowNodeConfig.value.assignees[index].marks = marks;
};

// 审批人保存
const saveApprover = (leave = true) => {
  if (flowNodeConfig.value.approvalType == 0) {
    delete flowNodeConfig.value.autoConditionExpression;
  }
  flowNodeConfig.value.assignees = flowNodeConfig.value.assignees.map(
    (assignee) => {
      assignee.assigneeTypeEnum = ASSIGNEE_TYPE[assignee.assigneeType];
      return assignee;
    }
  );
  console.log("saveApprover", toRaw(flowNodeConfig.value));
  setApproverConfig({
    value: toRaw(flowNodeConfig.value),
    flag: true,
    id: _uid,
  });
  leave && close();
};

const close = () => {
  showApproverDrawer(false);
};

onBeforeMount(() => {});
onMounted(() => {});
</script>

<style lang="less">
.approver-drawer__content {
  user-select: none;

  .approval-editor-tab-wrapper {
    margin-top: 24px;

    .item-content-editor,
    .item-content-auth {
      margin-top: 8px;

      .approver-list {
        .approver-wrapper {
          border: 1px solid #e4e5e7;
          border-radius: 6px;
          overflow: hidden;

          + .approver-wrapper {
            margin-top: 6px;
          }

          .header {
            padding: 0 16px;
            background: #f5f6f7;
            height: 36px;
            line-height: 36px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
              color: #1f2329;
              font-weight: 600;
            }

            .arco-icon {
              cursor: pointer;

              &:hover {
                color: #3370ff;
              }
            }
          }

          // .main-content {
          // }

          .sub-content {
            padding: 0 16px 10px;

            .sub-content-top-line {
              border-top: 1px solid #dee0e3;
            }

            p {
              padding-top: 10px;
              color: #1f2329;
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 8px;

              span {
                color: #8f959e;
                font-weight: 400;
                font-size: 13px;
              }
            }

            .arco-form-item {
              margin-bottom: 0;
            }

            .assignee-box {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .assignee-list {
                flex: 1;
                margin-left: 10px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;

                .arco-tag {
                  height: 28px;
                }
              }
            }
          }

          .radio-group {
            padding: 10px 16px;
            width: 100%;

            .arco-radio {
              margin-right: 2px;
            }
          }
        }
      }

      .add-operator {
        margin-top: 8px;
      }

      .item-wrap {
        + .item-wrap {
          margin-top: 24px;
        }
      }

      .approver-null-select-box {
        margin-top: 8px;
      }

      .auth-list {
        display: flex;
        flex-direction: column;

        .auth-item {
          margin-top: 10px;
        }
      }

      .more-info {
        line-height: 20px;
        color: #646a73;

        p {
          position: relative;
          padding-left: 10px;
          margin-top: 8px;

          &::before {
            content: "";
            width: 4px;
            height: 4px;
            position: absolute;
            top: 9px;
            left: 0;
            border-radius: 2px;
            background: #3370ff;
          }
        }
      }
    }
  }

  .arco-radio-group-button {
    width: 100%;

    .arco-radio-button {
      flex: 1;
      text-align: center;
    }
  }

  .item-key-wrapper {
    .item-key {
      color: #1f2329;
      font-weight: 600;
    }
  }

  .item-content {
    margin-top: 8px;
  }
}

.timer {
  display: flex;
  flex-direction: row;
  align-items: center;

  .unit {
    margin-left: 5px;
    width: 45px;
  }
}

.switch-container {
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin: 0 12px;

  .select-tip {
    color: #646a73;
  }
}
</style>
